<template>
  <div>
    <el-card class="box-card">
      <template #header>
        <div class="title">不能选择今天之前的日期：</div>
      </template>
      <m-choose-date :disableToday="true" type="datetime" :startOptions="startOptions" @startChange="dateStartChange" @endChange="dateEndChange"></m-choose-date>
    </el-card>

    <el-card class="box-card">
      <template #header>
        <div class="title">能选择今天之前的日期：</div>
      </template>
      <m-choose-date :disableToday="false" type="datetime" :startOptions="startOptions" @startChange="dateStartChange" @endChange="dateEndChange"></m-choose-date>
    </el-card>
  </div>
</template>

<script lang='ts' setup>
interface endValue {
  startTime: string,
  endTime: string
}
interface dateEndValue {
  startDate: Date,
  endDate: Date
}
let dateStartChange = (val: Date) => {
  console.log(val)
}
let dateEndChange = (val: dateEndValue) => {
  console.log(val)
}
let startOptions = {
  // size: 'mini',
  // clearable: false
}
</script>

<style lang='scss' scoped>
</style>